<div id="novels_carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for novel in novels_carousel %}
        {% if forloop.first %}
        <li data-target="#novels_carousel" data-slide-to="{{forloop.counter0}}" class="active"></li>
        {% else %}
        <li data-target="#novels_carousel" data-slide-to="{{forloop.counter0}}"></li>
        {% endif %}
        {% endfor %}
    </ol>
    <div class="carousel-inner">
        {% for novel in novels_carousel %}
        {% if forloop.first %}
        <div class="carousel-item active">
            <a href="{% url 'Novels:novels_cover' novel.fId %}">
                <img src="{{novel.fCover}}" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    {#<h5>{{novel.fName}}</h5>#}
                </div>
            </a>
        </div>
        {% else %}
        <div class="carousel-item">
            <a href="{% url 'Novels:novels_cover' novel.fId %}">
                <img src="{{novel.fCover}}" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    {#<h5>{{novel.fName}}</h5>#}
                </div>
            </a>
        </div>
        {% endif %}
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#novels_carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#novels_carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>
